<template>
  <div>
    <h2>v-model传值</h2>
    <div>
      <p>v-model原理-v-model绑定给普通表单元素</p>
      <p>count数据展示{{ count }}</p>
      <input type="text" :value="count" @input="count = +$event.target.value" />
      <input type="text" v-model="count" />
    </div>
    <div>
      <p>v-model原理—绑定给组件</p>
      <Child :value="count" @input="count = $event"></Child>
      <Child v-model="count"></Child>
    </div>
    <p>
      注释: <br />
      * v-model绑定给普通元素<br />
      1.强制绑定一个value属性 :value <br />
      2.绑定一个@input事件,当input内容发生改变时,触发input事件,修改绑定的值<br />
      <br />
      * v-model绑定给组件<br />
      1. 给组件强制绑定了一个 :value="xxx" ,组件内部通过props接受<br />
      2. 给组件绑定一个
      @input的自定义事件,当组件内部的表单发生修改,则触发自定义事件的input事件,从而向父组件传递数据<br />
      <br />
      * v-model绑定给普通表单元素:表单的数据双向绑定<br />
      * v-model绑定给组件元素:父子组件的数据双向绑定<br />
    </p>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Props",
  components: {
    Child,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    clickHandle(n) {
      this.count += n;
    },
  },
};
</script>

<style></style>
